<script setup lang="ts">
import type {FormInstance, FormRules} from "element-plus";
import { pcaTextArr } from 'element-china-area-data'
type FormType={
  c_regtype:string,//I,E
  certification_id:string,//6
  c_st_m:string,//广东省
  c_ct_m:string,//广州市
  c_dt_m:string,//番禺区
  c_adr_m:string,//谢村地铁站大
  c_pc:string,//510000
  c_ph:string,//18024168279
  c_em:string,//
  c_org_m:string,//
  is_default?:number,//0,1
}
definePageMeta({
  layout:'admin',
  title:'添加域名模板',
});
import { regionData } from 'element-china-area-data'
import {CERTIFICATE_TYPE} from "~/const/Maps";
const rules=reactive<FormRules<FormType>>({
  c_regtype:[
    {required:true,message:'请选择注册类型',trigger:'blur'}
  ],
  certification_id:[
    {required:true,message:'请选择认证模版',trigger:'blur'}
  ],
  c_st_m:[
    {required:true,message:'请选择省份',trigger:'blur'}
  ],
  c_ct_m:[
    {required:true,message:'请选择城市',trigger:'blur'}
  ],
  c_dt_m:[
    {required:true,message:'请选择区县',trigger:'blur'}
  ],
  c_adr_m:[
    {required:true,message:'请输入详细地址',trigger:'blur'}
  ],
  c_pc:[
    {required:true,message:'请输入邮编',trigger:'blur'},
    {pattern:/^\d{6}$/,message:'请输入正确的邮编',trigger:'blur'}
  ],
  c_ph:[
    {required:true,message:'请输入手机号',trigger:'blur'},
    {pattern:/^1[3-9]\d{9}$/,message:'请输入正确的手机号',trigger:'blur'}
  ],
  c_em:[
    {required:true,message:'请输入邮箱',trigger:'blur'},
    {type:'email',message:'请输入正确的邮箱',trigger:'blur'}
  ],
  c_org_m:[
    {required:true,message:'请输入公司名称',trigger:'blur'}
  ],
})
const formRef=ref<FormInstance>()
const form=reactive<FormType>({
  c_regtype:'I',
  certification_id:'',
  c_st_m:'',
  c_ct_m:'',
  c_dt_m:'',
  c_adr_m:'',
  c_pc:'',
  c_ph:'',
  c_em:'',
  c_org_m:'',
  is_default:0,
});
const selectedOptions=ref<string[]>([])
const certificationList=ref<Array<any>>([])
const getCertificationList=async ()=> {
  if(form.c_regtype==''){
    return []
  }
  const {data,code}=await useGet('/user/getCertificationList',{certification_type:form.c_regtype=='I'?10:20,page:1,limit:100,examine_status:10})
  if(code==200){
    certificationList.value=data.list.map((item:any)=>({label:item.certification_type==10?`${item.surname}${item.name}`:item.business_name,id:item.id,certification_type:item.certification_type}))
  }else{
    return []
  }
}
getCertificationList()
watch(()=>form.c_regtype,()=>{
  form.certification_id='';
  getCertificationList()
})
watchEffect(()=>{
  form.c_st_m=selectedOptions.value[0]??''
  form.c_ct_m=selectedOptions.value[1]??''
  form.c_dt_m=selectedOptions.value[2]??''
})
const submit=async ()=>{
  if(formRef.value){
    formRef.value?.validate(async (isValid, invalidFields)=>{
      if(isValid){
        const {code}=await usePost('/west/createTemplate',form)
        if(code==200){
          ElMessage.success('添加成功')
          formRef.value?.clearValidate?.()
          formRef.value?.resetFields?.()
          const router=useRouter()
          router.push('/admin/domain/template')
        }
      }else{
        showFieldsError(invalidFields);
      }
    })
  }
}
</script>

<template>
  <div>
    <AuthenText>
<pre>
功能介绍：使用本功能，可增加一个域名摸板，模板添加后无法修改，只能删除，添加后立即生效。
</pre>
    </AuthenText>
    <el-card>
      <el-form :model="form" :rules="rules" ref="formRef" label-suffix="：" label-width="100" class="w-[500px] mx-auto">
        <el-form-item label="注册类型" prop="c_regtype">
          <el-radio-group v-model="form.c_regtype">
            <el-radio label="个人" value="I"></el-radio>
            <el-radio label="企业" value="E"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="认证模版" prop="certification_id">
          <el-select v-model="form.certification_id" placeholder="请选择认证模版">
            <el-option v-for="item in certificationList" :label="`${CERTIFICATE_TYPE[item.certification_type]}-${item.label}`" :value="item.id" :key="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="省份" prop="c_st_m">
          <el-cascader
              size="small"
              class="w-full"
              :options="pcaTextArr"
              v-model="selectedOptions"
              placeholder="请选择省市区"
          >
          </el-cascader>
        </el-form-item>
        <el-form-item label="详细地址" prop="c_adr_m">
          <el-input v-model="form.c_adr_m" type="textarea" placeholder="请输入详细地址"></el-input>
        </el-form-item>
        <el-form-item label="邮编" prop="c_pc">
          <el-input v-model="form.c_pc" placeholder="请输入邮编"></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="c_ph">
          <el-input v-model="form.c_ph" placeholder="请输入手机号"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="c_em">
          <el-input v-model="form.c_em" placeholder="请输入邮箱"></el-input>
        </el-form-item>
        <el-form-item label="公司名称" prop="c_org_m" v-if="form.c_regtype=='E'">
          <el-input v-model="form.c_org_m" placeholder="请输入公司名称"></el-input>
        </el-form-item>
        <el-form-item>
          <el-checkbox v-model="form.is_default" :true-value="1" :false-value="0">设置为默认模板</el-checkbox>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submit">提交</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>

</template>

<style scoped lang="scss">

</style>